<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册-会员</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>
</head>
<body>
<!-- 中部开始 -->
<div class="wrapper">
    <!-- 右侧主体开始 -->
    <div class="page-content">
        <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form" action="${pageContext.request.contextPath}/member/register.action" method="post">
                <div class="layui-form-item">
                    <label for="L_phone" class="layui-form-label">
                        <span class="x-red">*</span>电话
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_phone" name="memlogname" required lay-verify="phone"
                               autocomplete="off" autofocus class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux" id="spanPhone">
                        <span class="x-red" >*</span>将会成为您唯一的登入名
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_pass" class="layui-form-label">
                        <span class="x-red">*</span>密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_pass" name="mempassword" required lay-verify="pass"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        请输入6-16位含英文的字符
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                        <span class="x-red">*</span>确认密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_repass" name="repass" required lay-verify="pass"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux" id="spanPass">
                        <span class="x-red" ></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_memrealname" class="layui-form-label">
                        <span class="x-red">*</span>真实名字
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_memrealname" name="memrealname" required lay-verify="realname"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_sex" class="layui-form-label">
                        <span class="x-red">*</span>性别
                    </label>
                    <div class="layui-input-inline">
                        <input type="radio" id="L_sex" name="memsex" required lay-verify="sex" checked
                               autocomplete="off" class="layui-input" value="男" title="男">
                        <input type="radio" id="L_sex2" name="memsex" required lay-verify="sex"
                               autocomplete="off" class="layui-input" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">
                        <span class="x-red">*</span>邮箱
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_email" name="mememail" required lay-verify="email"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_card" class="layui-form-label">
                        <span class="x-red">*</span>会员卡
                    </label>
                    <div class="layui-input-inline">
                        <select class="layui-input" name="memcard" autocomplete="off" id="L_card">
                            <c:forEach var="card" items="${cardlist}">
                                <option value=${card.cardid} <c:if test="${card.cardid==2}">selected</c:if>>${card.cardname}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>必须购买会员卡成为会员才能注册
                    </div>
                </div>
<%--                根据选择的card设置会员卡开卡时间（当前时间）和到期时间--%>
                <input type="date" id="cardstart" name="cardstart" hidden>
                <input type="date" id="cardend" name="cardend" hidden>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button  class="layui-btn" lay-filter="add" type="button" onclick="Tijiao()">
                        确定
                    </button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="layui-btn" lay-filter="add" onclick="x_admin_close()">
                        返回
                    </button>
                </div>
            </form>
            <!-- 右侧内容框架，更改从这里结束 -->
        </div>
    </div>
    <!-- 右侧主体结束 -->
</div>
<!-- 中部结束 -->
<script>
    //验证用户名不能重复,且为正确的手机号
    $("#L_phone").blur(function (){
        var inphone = $("#L_phone").val();
        var str = /^1\d{10}$/
        if (str.test(inphone)){
            //输入框不为空，则进入Ajax判断用户名是否重复
            $.ajax({
                url:"${pageContext.request.contextPath}/member/checkName.action",
                type:"post",
                data:{"username":inphone},
                success:function (msg){
                    //接收controller返回数据，no表示重复
                    if (msg.toString()=="no"){
                        $("#spanPhone").css("color","red");
                        $("#spanPhone").text("号码已被注册，请更换");
                        //注册名重复，则让输入框一直处于焦点获取状态
                        $("#L_phone").focus();
                    }else {
                        //用户名可用
                        $("#spanPhone").css("color","white");
                        $("#spanPhone").text("*将会成为您唯一的登入名");
                    }
                },
                error:function () {
                    alert("注册失败！");
                }
            });
        }else{
            $("#L_phone").focus();
            $("#spanPhone").css("color","red");
            layer.msg("请输入正确的手机号");
        }

    });
    //给时间赋值，提交表单
    // $(".layui-btn").click(function () {
    //     //获取日期
    //     var d = new Date();
    //     //获取card选择的值
    //     var carid = $("#L_card option:selected").val();
    //     //获取开始日期标签的value属性
    //     var starDate = $("#cardstart").val(strToDate(d));
    //     //获取到期日期标签的value属性
    //     var endDate = $("#cardend");
    //     //根据选择的值设置到期日期
    //     if (carid==1){
    //         d.setMonth(d.getMonth()+1);
    //     }else if (carid==2){
    //         d.setMonth(d.getMonth()+3);
    //     }else if (carid==3){
    //         d.setMonth(d.getMonth()+6);
    //     }else if (carid==4){
    //         d.setMonth(d.getMonth()+9);
    //     }
    //     endDate.val(strToDate(d));
    //     console.log(endDate.val());
    //     console.log(endDate);
    //     //提交表单,获取表单
    //     $(".layui-form").submit();
    // });
    //日期格式化成yyyy-MM-dd字符串
    function strToDate(d) {
        //获取年份
        var year = d.getFullYear();
        //获取月份
        var month = d.getMonth()+1;
        //获取日
        var day = d.getDate();
        //如果月跟日小于9则前面补零，不然不符合yyyy-MM-dd格式
        if (month<9) month = "0"+month;
        if (day<9) day = "0"+day;
        return year+"-"+month+"-"+day;
    };
    function Tijiao() {
        //判断输入是否合法
        var a = $("#L_pass").val();
        var b = $("#L_email").val();
        var c = $("#L_repass").val();
        var str1 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
        var str2 = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
        if (!str1.test(a)){
            layer.msg("请输入6-16位含英文的字符");
        }else if (a!=c){
            layer.msg("两次密码不一致");
        }else if (!str2.test(b)){
            layer.msg("请输入正确邮箱");
        }else {
            //给时间赋值，提交表单
                //获取日期
                var d = new Date();
                //获取card选择的值
                var carid = $("#L_card option:selected").val();
                //给开卡时间赋值
                $("#cardstart").val(strToDate(d));
                //获取到期日期标签的value属性
                var endDate = $("#cardend");
                //根据选择的值设置到期日期
                if (carid==1){
                    d.setMonth(d.getMonth()+1);
                }else if (carid==2){
                    d.setMonth(d.getMonth()+3);
                }else if (carid==3){
                    d.setMonth(d.getMonth()+6);
                }else if (carid==4){
                    d.setMonth(d.getMonth()+9);
                }
                //给到期时间赋值
                endDate.val(strToDate(d));
            $(".layui-form").submit();
        }
    };
</script>
</body>
</html>
